{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">精英选手国家分布</h5>
            </div>
            <div class="card-body">
                <div id="countryPie"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">前100名完赛时间分布</h5>
            </div>
            <div class="card-body">
                <div id="eliteScatter"></div>
            </div>
        </div>
    </div>
</div>

<script>
    var countryPieData = {{ country_pie | safe }};
    var eliteScatterData = {{ elite_scatter | safe }};
    Plotly.newPlot('countryPie', countryPieData.data, countryPieData.layout);
    Plotly.newPlot('eliteScatter', eliteScatterData.data, eliteScatterData.layout);
</script>
{% endblock %}
`
``</rewritten_file>